<template>
    <div ref="lotRectangle" class="tx-c">
        <div class="flex-box flex-wp tx-s-14 bg-c-g lineh">
            <div class="wd-33 bor-b" v-for="(item, i) in tab" :key="i" :class="{
                'circle-R tx-c-wh' : playType == item[0]
            }" @click="togTab(item[0], item[1])">{{ item[1] }}</div>
        </div>
        <div class="scroll-lot top" v-if="this.title == 'ztm'">
            <lhc-options
                :title="selTab"
                :odds="this.$store.state.lotOdds.ztm.pl"
                :playType="playType"
                :content="c1z49Cont"
                :temp="7"
                ></lhc-options>
            <lhc-options
                :title="selTab"
                :odds="odds"
                :playType="playType"
                :content="hwbCont"
                :temp="4"
                ></lhc-options>
        </div>
        <div class="scroll-lot top" v-if="this.title == 'yxws'">
            <lhc-options v-show="this.playType.indexOf('_yx') > -1"
                :title="selTab"
                :odds="this.$store.state.lotOdds.ztm.pl"
                :playType="playType"
                :content="c1z49Cont"
                :temp="7"
                ></lhc-options>
            <lhc-options v-show="this.playType.indexOf('_ws') > -1"
                :title="selTab"
                :odds="odds"
                :playType="playType"
                :content="hwbCont"
                :temp="4"
                ></lhc-options>
        </div>
    </div>
</template>

<script type="text/ecmascript-6">
import 'common/css/lottery.css'
import LhcOptions from "./lhcOptions"
import { isDefine } from '../../common/js/common'
import { c1z49Cont, hwbCont, sxCont } from '../../common/js/data'
export default {
    data () {
        return {
            playType : this.tab[0][0], // tab切换标识
            selTab : [this.playType, this.tab[this.playType]], // 选中tab信息
            c1z49Cont : c1z49Cont(), // 数字内容
            hwbCont : hwbCont, // 特码合尾波内容
            odds : '',
            sxCont : sxCont()
        }
    },
    created () {
        this.odds = this.$store.state.lotOdds[this.title]
    },
    props: {
        title : String,
        tab : Array
    },
    methods : {
        togTab (key, value) {
            this.playType = key
            this.selTab = [key, this.tab[key]]
            // 重置下注数据
            this.$store.state.lotOptions = []
            this.$store.state.lotSelData = []
        }
    },
    components : {
        LhcOptions
    }
}
</script>

<style scoped lang="stylus" rel="stylesheet/stylus">
    .lineh
        line-height : 2rem
    .scroll-lot
        position : fixed
        bottom : 3.25rem
        width : 96%
        overflow: auto
    .scroll-lot::-webkit-scrollbar
        display : none
    .top
        top : 13.375rem
    .bor-b
        border-bottom: 1px solid #CCC
</style>